<template>
	<view class="work-my-send-page page">
		<image :src="`${cloudStorage}index/top-bg.png`" mode="widthFix" class="top-bg"></image>
		<CustomNav :isBack="true" color="#000" :topBgColor="topBgColor" title="我的收藏"></CustomNav>
		<scroll-view :scroll-y="true" :scroll-top="scrollTop" :enable-back-to-top="true" :show-scrollbar="true" :enable-flex="true" class="list-block block" :style="'height:calc(100vh - '+mt+' - 40rpx - 66rpx);margin-top:'+mt" @scrolltolower="changePage">
			<template v-if="list.length>0">
				<WorkItem :detail="item.work" v-for="item in list" :key="item.id"></WorkItem>
			</template>
			<template v-if="list.length==0&&!more">
				<view class="empty">暂无数据</view>
			</template>
			<template v-if="list.length>0&&!more">
				<view class="empty">没有更多了</view>
			</template>
		</scroll-view>
	</view>
</template>

<script>
	import {collectWorkList,getIndexMenuWorkType} from '@/api/work.js'
	import {isMore} from '@/util/util.js'
	import WorkItem from '@/components/WorkItem/WorkItem'
	export default{
		components:{WorkItem},
		data(){
			return{
				topBgColor: 'rgba(0,0,0,0)',
				page:1,
				limit:20,
				list:[],
				total:0,
				more:true,
				scrollTop:0,
			}
		},
		methods:{
			getList(refresh=false){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				collectWorkList({page:this.page,limit:this.limit}).then(res=>{
					console.log(refresh)
					if(refresh){
						this.list=res.list;
					}else{
						this.list=[...this.list,...res.list];
					}
					this.more=isMore(this.page,this.limit,res.count)
					this.total=res.count;
				})
			},
			changePage(){
				if(this.more){
					this.page++;
					this.getList()
				}
			}
		},
		onLoad() {
			this.getList(true)
		}
	}
</script>

<style lang="scss" scoped>
	.work-my-send-page {
		overflow: hidden;
	
		.top-bg {
			position: absolute;
			z-index: -1;
			width: 100%;
		}
	
		.block {
			width: $content-width;
		}
		.tab-block{
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: center;
			.tab-item{
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.line{
					margin-top: 10rpx;
					height: 6px;
					width: 20px;
					border-radius: 12px;
					background: rgba(0,0,0,0);
				}
			}
			.tab-item.selected{
				.tab-name{
					font-size: 34rpx;
					font-weight: bold;
				}
				.line{
					background: #fa9b17;
				}
			}
		}
		.list-block{
			width: 100%;
			margin-top:40rpx;
			background: #f8f8f8;
			border-radius: 20px 20px 0 0;
			padding: 30rpx;
			.list-item{
				background: #fff;
				border-radius: 12px;
				padding: 30rpx;
				margin-bottom: 30rpx;
				width: 100%;
				.name-block{
					width: 100%;
					display: flex;
					align-items: center;
					.valuation{
						width: 100rpx;
						border-radius: 4px;
						color:#fa9b17;
						background: #fcf2d8;
						font-size: 24rpx;
						padding: 2px 7px;
						margin-right: 20rpx;
					}
					.name{
						width: calc(100% - 260rpx);
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
					}
					.price{
						width: 140rpx;
						margin-top: 30rpx;
						color: #fa9b17;
						font-size: 24rpx;
						.number{
							font-size: 32rpx;
						}
					}
				}
				.time{
					margin-top: 30rpx;
					color: #757575;
					font-size: 28rpx;
				}
				
			}
		}
	}
</style>